<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>后台登录</title>
    {css href="/static/common/bootstrap/css/bootstrap.css"/}
    <style>
        /*login 后台登录页面css样式*/
        body{
            background-size: 1920px;
            background-repeat: no-repeat;
            background-image: url("/static/images/bk.jpg");
        }
        * {
            color: whitesmoke;
        }
        .container {
            display: -webkit-flex; /* Safari */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .panel-form {
            align-self: flex-end;
            width: 35%;
            padding: 60px 50px;
            background-color: rgba(10, 10, 10, 0.77);
            border: 2px ridge rgba(238, 238, 238, 0.13);
            border-radius: 5px;
            -moz-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
            -webkit-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
            box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
            border-bottom: none;
            border-bottom-left-radius: initial;
            border-bottom-right-radius: initial;
        }
        .div {
            display: -webkit-flex; /* Safari */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .captcha-group {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: flex-start;
        }
        .captcha-img {
            height:30px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel-form">
        <form class="form" action="{:url('Login/doLogin')}" method="post">
            <h1 class="title-h1">陈帅个人博客后台</h1>
            <div class="div form-group">
                <input type="text" name="uname" placeholder="账号" class="form-control input-sm text-center"/><br/>
                <input type="password" name="pwd" placeholder="密码" class="form-control input-sm text-center" /><br/>
                <div class="captcha-group">
                    <input type="text" name="verify" placeholder="验证码" class="form-control input-sm text-center"/><br/>
                    <img class="captcha-img" src="{:captcha_src()}" alt="captcha" onclick="this.src='{:captcha_src()}?'+Math.random();" title="点击换图-v-"/><br/>
                </div><br/>
                <input type="button" id="submit" value="登录" class="btn btn-lg btn-success "/>
            </div>
        </form>
        <!--登录错误提示-->
        <div id="verifyerror"></div>
    </div>
</div>
{js href="/static/common/js/jquery-3.3.1.js,/static/common/js/snow.js,/static/common/js/getheight.js"/}
<script>
    $(function(){
        /*回车提交表单*/
        $(document).keyup(function(event){
            if(event.keyCode ==13){
                submitForm();
            }
        });
        /*点击提交表单*/
        $('#submit').click(function(){
            submitForm();
        });
    });
    /*表单提交函数*/
    function submitForm()
    {
        $.ajax({
            url : "{:url('Login/doLogin')}",
            type : 'post',
            data : $('form').serialize(),
            success : function(re){
                console.log(re);
                if(re.code == '1') {
                    window.location.href = "{:url('admin/index/index')}"
                } else if(re.code != '1') {
                    $('#verifyerror').html("<b style='color:red'>"+ re.msg +"</b>")
                }
            }

        });

    }
</script>
</body>
</html>